<template>
  <div>
    <Tips />
    <!-- 产品列表  -->
    <div class="shiyishi">
      <van-checkbox-group v-model="result" :disabled="isEditing">
        <van-checkbox
          :name="item.id"
          v-for="item in cartList"
          :key="item.id"
          @click="changeChecked(item)"
        >
          <van-swipe-cell>
            <van-card
              :num="item.number"
              :price="item.retail_price"
              :title="item.goods_name"
              :thumb="item.list_pic_url"
            />
            <van-stepper
              v-model="item.number"
              v-show="isEditing"
              @change="stepperChange(item)"
            />
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="delGood(item.product_id)"
              />
            </template>
          </van-swipe-cell>
        </van-checkbox>
      </van-checkbox-group>
    </div>
    <!-- 提交订单栏 -->
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll" :disabled="isEditing"
        >全选</van-checkbox
      >
      <template #tip>
        累计共<span>{{ cartTotal.checkedGoodsCount }}</span
        >件商品，可点击
        <van-button
          :type="isEditing ? 'danger' : 'primary'"
          size="small"
          @click="isEdit()"
          >{{ isEditing ? "完成修改" : "修改" }}</van-button
        >
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from "@/components/Tips.vue";
import {
  SeptterChangeData,
  GetCartListData,
  ChangeGoodchecked,
  DeleteGood,
} from "@/request/api";
export default {
  data() {
    return {
      // 购物车是否全选
      // checkedAll: true,
      // 展示选中的元素的数组
      // 哪一个商品的checked为1 就把该商品id添加到该数组中
      result: [],
      // 购物车数据
      cartList: [],
      // 商品总信息
      cartTotal: [],
      // 编辑状态按钮
      isEditing: false,
    };
  },
  computed: {
    checkedAll: {
      get() {
        // return true/false
        // 受result数组的影响
        // result数组 和 cartList数组的长度是不是相等    并且长度不为0
        return (
          this.result.length == this.cartList.length &&
          this.cartList.length !== 0
        );
      },
      set(val) {
        // 编辑的时候 防止修改
        if (this.isEditing) return;
        // console.log("点击了全选按钮", val)   // val就是要修改成的值

        // 后端要求参数格式的处理
        let ids = this.cartList.map((item) => {
          return item.product_id;
        });
        // console.log(ids.join()); // [213, 217, 162]   =====>    213,217,162
        // console.log(ids.toString()); // [213, 217, 162]   =====>    213,217,162

        // 发起全选/全不选的请求
        ChangeGoodchecked({
          isChecked: val == false ? "0" : "1", // 告诉后端点击全选按钮之后，要全部改成0 或者1
          productIds: ids.join(), // 告诉后端哪些产品需要修改
        }).then((res) => {
          // console.log(res);
          this.totalFn(res.data);
        });
      },
    },
  },
  created() {
    GetCartListData().then((res) => {
      if (res.errno == 0) {
        this.totalFn(res.data);
        // console.log("购物车列表数据", res.data);
      }
    });
  },
  components: {
    Tips,
  },
  methods: {
    onClickLink() {},
    onSubmit() {},
    delGood(pid) {
      DeleteGood({
        productIds: pid.toString(),
      }).then((res) => {
        if (res.errno == 0) {
          // console.log(res.data);
          this.totalFn(res.data);
        }
      });
    },

    isEdit() {
      this.isEditing = !this.isEditing;
    },
    totalFn(data) {
      this.cartList = data.cartList;
      this.cartTotal = data.cartTotal;

      // 清空 This.result 数组 使后面的数组不会越来越长
      this.result = [];
      this.cartList.map((item) => {
        item.checked == 1 ? this.result.push(item.id) : "";
      });
    },
    changeChecked(item) {
      if (this.isEditing) return;
      ChangeGoodchecked({
        isChecked: item.checked == 0 ? 1 : 0,
        productIds: item.product_id,
      }).then((res) => {
        if (res.errno == 0) {
          // console.log("购物车全选", res.data);
          this.totalFn(res.data);
        }
      });
    },
    stepperChange(item) {
      // console.log("计步器", item);
      SeptterChangeData({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        if (res.errno == 0) {
          this.totalFn(res.data);
        }
      });
    },
  },
};
</script>

<style lang = "less" scoped>
/deep/.van-checkbox__label {
  flex: 1;
}
.shiyishi {
  padding-bottom: 1.5rem;
}
.van-checkbox-group {
  /* padding-bottom: 1.55rem; */
  background-color: #fff;
  .van-checkbox {
    border-bottom: 1px solid #ccc;
    padding: 0.1rem 0.15rem;
  }
}
.van-submit-bar {
  bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
  .van-button {
    margin: 0 0.08rem;
  }
}
.van-card__title {
  font-size: 0.18rem;
  line-height: 0.24rem;
  max-height: 0.5rem;
}
.van-card__price,
.van-card__num {
  font-size: 0.16rem;
}
.van-stepper {
  text-align: right;
}
.delete-button {
  height: 100%;
}

.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>